<template>
  <section>
    <el-button type="text" @click="addGoodsType" size="mini">添加新类型</el-button>
    <el-row>
      <el-table :data="mallGoodsTypeList" style="width: 100%" size="mini">
        <el-table-column type="index" width="30" >
        </el-table-column>
        <el-table-column label="类型名称">
          <template slot-scope="scope">
            <el-input v-show="scope.row.edit" size="mini" v-model="scope.row.name"></el-input>
            <span  v-show="!scope.row.edit">{{scope.row.name}}</span>
          </template>
        </el-table-column>
        <el-table-column label="类型编码">
          <template slot-scope="scope">
            <el-input v-if="scope.row.edit" size="mini" v-model="scope.row.code"></el-input>
            <div v-show="!scope.row.edit">{{scope.row.code}}</div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" fixed="right">
          <template slot-scope="scope">
            <el-button :type="scope.row.edit?'success':'primary'" @click='confirm(scope.row)' size="mini" icon="edit">{{scope.row.edit?'完成':'编辑'}}</el-button>
            <el-button @click='del(scope)' size="mini" type="danger">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
  </section>
</template>

<script>
  import errHandler from '@/assets/errHandler.js'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import Vue from 'vue'//后续添加属性，需要vue联动
  export default {
    name: "goodsType",
    data() {
      return {
        mallGoodsTypeList:null
      }
    },
    created() {
      //加载商品类型列表
      this.getMallGoodsTypeList()
    },
    mounted() {
    },
    computed: {
      ...mapGetters(['department']),
    },
    watch: {},
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      getMallGoodsTypeList(){

      }
    }
  }
</script>

<style scoped>

</style>
